<!--
 	* @author hemengxia
 	积分兑换配置---设置充值记录
-->
<template>
  <section class="recharge-record">
    <el-dialog v-el-drag-dialog :visible.sync="visible" :close-on-click-modal="false" title="充值记录" center fullscreen
               @close="handleCancel()">
      <section class="join-main">
        <el-form ref="elForm" :inline="true" :model="form" :rules="rules">

          <el-form-item label="充值记录" prop="rechargeId">
            <el-select v-model="form.rechargeId" placeholder="请选择" style="width:500px">
              <el-option v-for="(item, index) in rechList" :key="index" :label="item.label" :value="item.value"/>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSubmit">添加</el-button>
          </el-form-item>
        </el-form>
        <section class="main-table">
          <el-table :data="list" style="width: 100%">
            <el-table-column type="index" width="50"/>
            <el-table-column prop="applyName" show-overflow-tooltip align="center" label="充值名称"/>
            <el-table-column prop="rechargeName" show-overflow-tooltip align="center" label="充值账号名称"/>
            <el-table-column prop="rechargeAmount" show-overflow-tooltip align="center" label="充值金额"/>

          </el-table>
        </section>
        <section class="main-page">
          <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
                      @pagination="getList"/>
        </section>
      </section>
      <div slot="footer" class="dialog-footer">
        <el-button style="padding: 8px 30px;" @click="handleCancel()">关 闭</el-button>
      </div>
    </el-dialog>
  </section>
</template>
<script>
import Pagination from '@/components/Pagination'
import elDragDialog from '@/directive/el-drag-dialog'
import {recordQueryPage, insert, getRech} from './api'

export default {
  name: 'RechargeRecord',
  components: {Pagination},
  directives: {elDragDialog},
  props: {
    id: {
      type: String,
      default: ''
    },
    accId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      rechList: [],
      visible: false,
      listQuery: {
        page: 1,
        limit: 10
      },
      total: 0,
      form: {
        rechargeId: ''
      },
      rules: {
        rechargeId: [{required: true, message: '请选择充值记录', trigger: 'change'}]
      },
      list: []
    }
  },
  watch: {
    form: {
      handler(newName, oldName) {
        if (this.$refs.classify) {
          this.$refs.classify.dropDownVisible = false
        }
      },
      immediate: true,
      deep: true
    }
  },
  async created() {
    this.getList()
    // this.rechList= await this.getRechList()
    //
    this.getRechList().then(res => {
      console.log('res', res)
      this.rechList = res
      this.visible = true
    }).catch(err => {
      console.log('err', err)
      this.visible = true
    })
  },
  methods: {
    getRechList() {
      const loading = this.$loading({
        lock: true,
        text: '请稍后',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.3)'
      })
      return new Promise((resolve, reject) => {
        getRech({accountId: this.accId}).then(res => {
          loading.close()
          const arr = res.data.data || []
          resolve(arr.map(a => ({
            ...a,
            value: a.id,
            label: `${a.applyName}(${a.rechargeAmount}元)`
          })))
        }).catch(error => {
          loading.close()
          reject(error)
        })
      })
    },
    getList(obj) {
      const loading = this.$loading({
        lock: true,
        text: '请稍后',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.3)'
      })
      const params = {
        page: obj ? obj.page : this.listQuery.page,
        pageSize: obj ? obj.limit : this.listQuery.limit,
        activityId: this.id
      }
      return new Promise((resolve, reject) => {
        recordQueryPage(params).then(({data}) => {
          loading.close()
          this.list = data.data.rows
          this.total = data.data.total
        }).catch(error => {
          reject(error)
          loading.close()
        })
      })
    },

    handleSubmit() {
      this.$refs['elForm'].validate((valid) => {
        if (valid) {
          const loading = this.$loading({
            lock: true,
            text: '请稍后',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.3)'
          })
          const params = {
            activityId: this.id,
            rechargeId: this.form.rechargeId,
            // rechargeId: 1111
          }
          return new Promise((resolve, reject) => {
            insert(params).then(() => {
              loading.close()
              this.$message({
                title: '成功',
                message: '设置成功',
                type: 'success',
                duration: 2000
              })
              this.$refs.elForm.resetFields()
              this.getList()
            }).catch(error => {
              loading.close()
              reject(error)

            })
          })
        } else {
          return false
        }
      })
    },

    handleCancel() {
      this.$emit('cancel')
    }
  }
}
</script>
<style lang="scss">
.recharge-record {
  .join-main {
    min-height: calc(100vh - 140px);
    max-height: calc(100vh - 140px);
    overflow: hidden;
    position: relative;

    .main-table {
      position: absolute;
      top: 70px;
      left: 0;
      right: 0;
      bottom: 72px;
      box-sizing: border-box;
      overflow: hidden;

      &::-webkit-scrollbar {
        width: 8px; /*对垂直流动条有效*/
        height: 1px; /*对水平流动条有效*/
      }

      /** 滚动条轨道*/
      &::-webkit-scrollbar-track {
        box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
        background-color: white;
        border-radius: 3px;
      }

      /** 滚动条里面小方块*/
      &::-webkit-scrollbar-thumb {
        height: 32px;
        border-radius: 5px;
        box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.1);
        background-color: #eaeaea;
      }

      &:hover {
        overflow: auto;
      }
    }

    .main-page {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
    }
  }
}
</style>
